import 'package:flutter/material.dart';
import 'package:flutter_eve_plugin/components/main/app_bar.dart';
import 'package:flutter_eve_plugin/components/ye_xiu/login/text_field.dart';
import 'package:flutter_eve_plugin/pages/ye_xiu/login/actions.dart';
import 'package:flutter_eve_plugin/route/main.dart';
import 'package:flutter_eve_plugin/store/main.dart';
import 'package:flutter_eve_plugin/store_vm/app_vm.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/login/main.dart';
import 'package:flutter_eve_plugin/store_vm/ye_xiu/main.dart';
import 'package:flutter_eve_plugin/utils/image_util.dart';
import 'package:flutter_eve_plugin/utils/screen_util.dart';
import 'package:flutter_eve_plugin/constants/icon_font.dart';
import 'package:flutter_redux/flutter_redux.dart';

class LoginInputWIFIPage extends StatefulWidget {
  final String title;

  LoginInputWIFIPage({Key key, this.title}) : super(key: key);

  @override
  _LoginInputWIFIPageState createState() => _LoginInputWIFIPageState();
}

class _LoginInputWIFIPageState extends State<LoginInputWIFIPage> {
  bool _openEye = false;
  bool _isConfirm = false;
  String _wifiName = 'Gowild-office';
  String _wifiPass = 'gowild@1225';

  @override
  Widget build(BuildContext context) {
    return StoreConnector<AppState, AppStateViewModel>(converter: (store) {
      return AppStateViewModel(
          state: store.state,
          yeXiuStateViewModel: YeXiuStateViewModel(
              loginStateViewModel: LoginStateViewModel(inputWifiNext: () {
            inputWifiName(store, _wifiName);
            inputWifiPass(store, _wifiPass);
            Navigator.pushNamed(context, RouteConstant.LoginConnectNetPage);
          })));
    }, builder: (context, vm) {
      _isConfirm = false;
      if (_wifiName.length > 0 && _wifiPass.length > 0) {
        _isConfirm = true;
      }

      return GestureDetector(
        onTap: () {
          FocusScope.of(context).requestFocus(FocusNode());
        },
        child: Scaffold(
          backgroundColor: Colors.white,
          appBar: buildAppBar(context,
              type: FigureIP.YE_XIU, colors: [Colors.white, Colors.white]),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Container(
                padding: EdgeInsets.only(left: setRatio(30), top: setRatio(20)),
                child: Text(
                  '请输入Wi-Fi信息',
                  style: TextStyle(
                      fontSize: setTextSp(24),
                      color: Color((0xFF333333)),
                      fontWeight: FontWeight.bold),
                ),
              ),
              SizedBox(
                height: setRatio(60),
              ),
              Container(
                margin:
                    EdgeInsets.only(left: setRatio(29), right: setRatio(29)),
                decoration: ShapeDecoration(
                    shape: UnderlineInputBorder(
                        borderSide: BorderSide(
                            color: Color(0xFFE5E5E5),
                            style: BorderStyle.solid,
                            width: setRatio(1)))),
                child: ITextField(
                    inputText: _wifiName,
                    deleteIcon: Icon(
                      IconFont.MORE,
                      color: Color(0xFFB4B6C4),
                      size: setRatio(2.5),
                    ),
                    showSuffix: true,
                    inputBorder: InputBorder.none,
                    keyboardType: ITextInputType.text,
                    hintText: '请输入Wi-Fi名',
                    hintStyle: TextStyle(
                        color: Color(0xFFC2C2C2), fontSize: setTextSp(15)),
                    textStyle: TextStyle(
                        color: Color(0xFF333333), fontSize: setTextSp(15)),
                    fieldCallBack: (content) {
                      _wifiName = content;
                      if (content.length <= 0) {
                        setState(() {});
                      }
                    }),
              ),
              SizedBox(
                height: setRatio(20),
              ),
              Container(
                margin:
                    EdgeInsets.only(left: setRatio(29), right: setRatio(29)),
                decoration: ShapeDecoration(
                    shape: UnderlineInputBorder(
                        borderSide: BorderSide(
                            color: Color(0xFFE5E5E5),
                            style: BorderStyle.solid,
                            width: setRatio(1)))),
                child: ITextField(
                  inputText: _wifiPass,
                  deleteIcon: Icon(
                    _openEye ? IconFont.OPEN_EYE : IconFont.CLOSE_EYE,
                    color: Color(0xFFB4B6C4),
                    size: setTextSp(12),
                  ),
                  showSuffix: true,
                  inputBorder: InputBorder.none,
                  keyboardType: ITextInputType.text,
                  isPassword: !_openEye,
                  hintText: '请输入密码',
                  hintStyle: TextStyle(
                      color: Color(0xFFC2C2C2), fontSize: setTextSp(15)),
                  textStyle: TextStyle(
                      color: Color(0xFF333333), fontSize: setTextSp(15)),
                  fieldCallBack: (content) {
                    _wifiPass = content;
                    if (content.length <= 0) {
                      setState(() {});
                    }
                  },
                  suffixBack: () {
                    setState(() {
                      _openEye = !_openEye;
                    });
                  },
                ),
              ),
              SizedBox(
                height: setRatio(54),
              ),
              GestureDetector(
                onTap: _isConfirm
                    ? vm.yeXiuStateViewModel.loginStateViewModel.inputWifiNext
                    : null,
                child: Container(
                  width: setRatio(315),
                  height: setRatio(46),
                  margin: EdgeInsets.only(left: setRatio(30)),
                  decoration: _isConfirm
                      ? BoxDecoration(
                          borderRadius:
                              BorderRadius.all(Radius.circular(setRatio(5))),
                          gradient: LinearGradient(
                              colors: [Color(0xFF0386FF), Color(0xFF03AAFF)],
                              begin: Alignment(0.5, 0),
                              end: Alignment(0.5, 1)))
                      : BoxDecoration(
                          color: Color(0xFFD8D8D8),
                          borderRadius:
                              BorderRadius.all(Radius.circular(setRatio(5))),
                        ),
                  child: Center(
                    child: Text(
                      '下一步',
                      style: TextStyle(
                          color: Colors.white, fontSize: setTextSp(17)),
                    ),
                  ),
                ),
              )
            ],
          ),
        ),
      );
    });
  }
}
